{% extends "pc/template.html" %}

{% block title %}
登录
{% endblock %}

{% include 'pc/公共样式配置/CSS总样式.html' %}

{% block css %}
<link rel="stylesheet" href="/static/HubUI/css/sweetalert2.css">
<style>
    .login-container {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f5f5f9;
    }

    .login-card {
        width: 400px;
        padding: 2rem;
        border-radius: 0.5rem;
        box-shadow: 0 0.25rem 1rem rgba(161, 172, 184, 0.45);
        background-color: #fff;
    }

    .login-title {
        text-align: center;
        margin-bottom: 2rem;
        color: #566a7f;
    }

    .form-floating {
        margin-bottom: 1rem;
    }

    .btn-login {
        width: 100%;
        margin-top: 1rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="login-container">
    <div class="login-card">
        <h4 class="login-title">欢迎登录</h4>
        <form id="loginForm" onsubmit="return handleLogin(event)">
            <div class="form-floating">
                <input type="text" class="form-control" id="username" placeholder="用户名" required>
                <label for="username">用户名</label>
            </div>
            <div class="form-floating">
                <input type="password" class="form-control" id="password" placeholder="密码" required>
                <label for="password">密码</label>
            </div>
            <div class="form-check mb-3">
                <input class="form-check-input" type="checkbox" id="rememberMe">
                <label class="form-check-label" for="rememberMe">记住我</label>
            </div>
            <button type="submit" class="btn btn-primary btn-login">登录</button>
        </form>
    </div>
</div>
{% endblock %}

{% block js %}
<!-- SweetAlert2 JS -->
<script>
    // 处理登录表单提交
    function handleLogin(event) {
        console.log('这是登录功能');
        event.preventDefault();
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        const rememberMe = document.getElementById('rememberMe').checked;

        console.log('用户名:', username);
        console.log('密码:', password);
        console.log('记住我:', rememberMe);

        // 显示loading状态
        const loadingToast = Swal.fire({
            title: '登录中...',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        axios({
            url: "/api/users/login/",
            method: "POST",
            data: {
                username: username,
                password: password,
                rememberMe: rememberMe
            }
        }).then(function (response) {
            console.log("登录结果：", response);
            if (response.data.code == 200) {
                Swal.fire({
                    icon: 'success',
                    title: '登录成功',
                    text: "登录成功，正在跳转...",
                    showConfirmButton: false,
                    timer: 1500
                }).then(function () {
                    window.location.href = "/web/pc/";
                    
                })
            } else {
                console.log("登录失败：", response.data.msg);
                Swal.fire(
                    '登录失败',
                    response.data.msg,
                    'error'
                )
            }
        }).catch(function (error) {
            console.log("错误：", error);
            Swal.fire({
                title: "登录失败",
                text: error.response?.data?.msg || "网络错误，请稍后重试",
                icon: "error"
            });
        }).finally(function () {
            // 只关闭loading状态
            loadingToast.close();
        });

        return false;
    }

    // 页面加载完成后的初始化
    document.addEventListener('DOMContentLoaded', function () {
        console.log('这是页面初始化功能');
    });

    // 记住我功能
    function handleRememberMe() {
        console.log('这是记住我功能');
    }

    // 表单验证
    function validateForm() {
        console.log('这是表单验证功能');
    }
</script>
{% endblock %}

{% block nav_left %}
{% include "pc/components/左侧导航栏.html" %}
{% endblock %}

{% block NavBar %}
{% endblock %}

{% include 'pc/公共样式配置/JS总样式.html' %}

{% block footer %}
{% include "pc/components/Footer.html" %}
{% endblock %}